<template>
    <div class="w-popup">
        <el-dialog :model-value="isShowPopup" :width="width" @closed="close" :close-on-click-modal="false" destroy-on-close>
            <div v-loading="loading" class="maske" :style="{ 'z-index': !loading ? -1 : 999 }"></div>
            <template #header v-if="title">
                <div class="title">
                    <slot name="title">
                        <span>{{ title }}</span>
                    </slot>
                </div>
            </template>
            <slot name="top"></slot>
            <slot></slot>
            <slot name="bottom"></slot>
            <template #footer>
                <div class="btns">
                    <el-button type="primary" class="confrim" @click="confrim" v-if="isShowConfrim">{{ confrimText }}</el-button>
                    <w-button :isShowIcon="false" @click="close" v-if="isShowCancel">{{ cancelText }}</w-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
const props = defineProps({
    isShowPopup: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ""
    },
    loading: {
        type: Boolean,
        default: false
    },
    isShowCancel: {
        type: Boolean,
        default: true
    },
    isShowConfrim: {
        type: Boolean,
        default: true
    },
    confrimText: {
        type: String,
        default: "提交"
    },
    cancelText: {
        type: String,
        default: "取消"
    },
    width: {
        type: String,
        default: "450"
    }
});
const emits = defineEmits(["close", "confrim"]);
const close = () => {
    emits("close");
};
const confrim = () => {
    emits("confrim");
};
</script>

<style lang="less" scoped>
.w-popup {
    .maske {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    ::v-deep(.el-dialog__header) {
        margin-right: 0;
    }
    .title {
        font-size: 16px;
        font-weight: 600;
        color: #1b3646;
    }

    .btns {
        display: flex;
        justify-content: center;
        align-items: center;
        .confrim {
            width: 80px;
            height: 32px;
        }
    }
    :deep(.el-dialog__body) {
        padding-top: 0;
        padding-bottom: 0;
    }
}
</style>
